﻿<link href="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/menu/jeasyui.extensions.menu.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.js"></script>
<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    以 Html 方式初始化：
    <div class="easyui-toolbar" data-options="width:800,align:'left'">
        <div>
            <a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">编辑</a>
            <div id="mm" style="width:150px;">
                <div data-options="iconCls:'icon-undo'">撤销</div>
                <div data-options="iconCls:'icon-redo'">恢复</div>
                <div class="menu-sep"></div>
                <div>剪切</div>
                <div>复制</div>
                <div>粘贴</div>
                <div class="menu-sep"></div>
                <div data-options="iconCls:'icon-remove'">删除</div>
                <div>全选</div>
            </div>
        </div>
    </div>
    <br />
    以 Js 方式初始化：
    <div id="con1"></div>
    <br />
    <div id="con2" class="easyui-toolbar"></div>
    <br />
    <br />
    <a id="btnDymAdd" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">点击此按钮，以“无需预留toolbar容器”的方式动态创建工具条对象</a>
    <br /><br />
    <span style="color:red;font-weight:bolder;">注意：若要在toolbar中使用menubutton，则需要在引入 toolbar.js 之前引用 menu.js</span>
    <br />
    <br />
    <br id="theBr" />
</div>

<script>
    $(function () {

        var options1 = {
            data: [
                "[1号工具条]",
                "以初始化形式加载工具条",
                {
                    type: "menubutton", text: "编辑", iconCls: "icon-edit", width: 100, disabled: false,
                    menus: [
                        { id: "menu1", text: "撤销", iconCls: "icon-undo", handler: function (e, itemOptions, target) { alert(itemOptions.text); } },
                        { id: "menu2", text: "恢复", iconCls: "icon-redo", handler: function (e, itemOptions, target) { alert(itemOptions.text); } }
                    ]
                },
                "-",
                {
                    type: "menubutton", text: "操作", iconCls: "icon-edit", width: 100, disabled: false,
                    menus: [
                        { text: "新建", iconCls: "icon-add", handler: function (e, itemOptions, target) { alert(itemOptions.text); } },
                        {
                            text: "粘贴", iconCls: "icon-ok",
                            children: [
                                { text: "直接粘贴", iconCls: "icon-ok", handler: function (e, itemOptions, target) { alert(itemOptions.text); } },
                                { text: "清空后粘贴", iconCls: "icon-ok", handler: function (e, itemOptions, target) { alert(itemOptions.text); } }
                            ]
                        }
                    ]
                }
            ]
        };
        $("#con1").toolbar(options1);

        var options2 = {
            data: [
                "[2号工具条]",
                "以方法形式加载工具条",
                {
                    type: "menubutton", text: "编辑", iconCls: "icon-edit", width: 100, disabled: false,
                    menus: [
                        { id: "menu1", text: "撤销", iconCls: "icon-undo", handler: function (e, itemOptions, target) { alert(itemOptions.text); } },
                        { id: "menu2", text: "恢复", iconCls: "icon-redo", handler: function (e, itemOptions, target) { alert(itemOptions.text); } }
                    ]
                }
            ]
        };
        $("#con2").toolbar("loadData", options2.data);

        $("#btnDymAdd").click(function () {
            var opts = $(this).linkbutton("options");
            if (opts.disabled) { return; }
            $("<div />").insertBefore("#theBr").toolbar({
                data: [
                    { text: "新增", iconCls: "icon-add", type: "button", width:60 },
                    { text: "编辑", iconCls: "icon-edit", type: "button", width: 60 },
                    { text: "删除", iconCls: "icon-remove", type: "button", width: 60 },
                    { text: "刷新", iconCls: "icon-reload", type: "button", width: 60 },
                    "-",
                    { type: "textbox", width: 90 },
                    { text: "搜索", iconCls: "icon-search", type: "button", width: 60, onclick: function () { } },
                    "-",
                    "<span style='color:red;'>本演示中的按钮都没有具体效果，只为演示工具条的使用。</span>"
                ]
            });
            $(this).linkbutton("disable");
        });

        top.window.$("#home-layout").layout("collapse", "west").layout("collapse", "east");
    });
</script>